<template>
  <div class="public-box mid">
    <div class="flex-justify-center">
      <span class="font-32">在苏台资数：</span>
      <div class="">
        <ul>
          <li v-for="(item,index) in items" :key="index">{{ item }}</li>
        </ul>
        <!--<div class="map_time">2022-22-22 12:00:00</div>-->
        <!--        <p class="font-24">2021-12-28 00:00:00</p>-->
      </div>
      <!--      <img src="../../../assets/images/index/right_mid.png">-->
    </div>
    <div v-if="mapFlag=='echartsMap'" id="chart-city" class="chart-city"></div>
    <div v-if="mapFlag=='arcgisMap'"  id="arcgis-city" class="chart-city"></div>
    <div class="map-switch">
      <el-button @click="changeMaoFlag" class="map-btn">
        <div style="position: relative;left: -20px">地图切换</div>
      </el-button>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import geoJson from './map3D/map/320500.json'
import { stt } from '@/models/screen'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
import TileLayer from '@arcgis/core/layers/TileLayer'
import IdentityManager from '@arcgis/core/identity/IdentityManager'
import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol'

import TextSymbol from '@arcgis/core/symbols/TextSymbol'
import locator from '@arcgis/core/rest/locator'
import Graphic from '@arcgis/core/Graphic'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import { setToken } from '@/utils/auth'

import { locationToAddress } from "@arcgis/core/rest/locator/locationToAddress";


const mapName = './map3D/map/320500.json'


const allAreaData = [] // 所有区县的统计数据
export default {
  name: 'Mid',
  data() {
    return {
      myChart: null,
      items: [],
      mapFlag:"echartsMap",
      map:'',
      mapView:''
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.initMap()
      this.init()
      this.initCity()
      // this.initGrid()
    })
  },
  methods: {
    changeMaoFlag(){
      if(this.mapFlag=="echartsMap"){

        echarts.init(document.getElementById('chart-city')).dispose()
        this.mapFlag="arcgisMap"

        this.$nextTick(() => {
          // this.initMap()

          // this.initArcgisMap()
          this.initArcgisMap()
          this.initGrid()
        })
      }else {
        this.mapFlag="echartsMap"
        this.initCity()
      }
    },
    async init() {
      const { data } = await stt.getScreenTotalEnterpriseInSz()
      const total = data.toString() // 把数字转换成字符串
      for (let i = 0; i < total.length; i++) {
        this.items.push(total[i])
      }
    },
    async initCity() {
      const { data } = await stt.getScreenStatisticsEnterpriseInSz()
      this.initMap(data)
    },
    initMap(cityData) {
      const _this = this
      const myChart = echarts.init(document.getElementById('chart-city'))
      const data = geoJson.features.map((item, index) => {
        const geoAreaName = item.properties.name // geo文件中的地理名称
        const areaCode = item.properties.areaCode // geo文件中的地理名称
        const currentArea = allAreaData.find((item) => {
          return item.name === geoAreaName
        })

        let taskNumber = index
        let volunteerNumber = index
        let processedNumber = index
        let consultationsNumber = index
        let tskPerc = index
        let memPerc = index
        let authMemPerc = index
        let consPerc = index
        if (currentArea) {
          taskNumber = currentArea.tasknumber
          volunteerNumber = currentArea.volunteernumber
          processedNumber = currentArea.processednumber
          consultationsNumber = currentArea.consultationsnumber

          tskPerc = currentArea.tskPerc
          memPerc = currentArea.memPerc
          authMemPerc = currentArea.authMemPerc
          consPerc = currentArea.consPerc
        }
        cityData.forEach(cityItem => {
          if (item.properties.name === cityItem.areaName) {
            volunteerNumber = cityItem.enterpriseCount
          }
        })
        return {
          name: geoAreaName,
          value: volunteerNumber,
          areaCode: areaCode,//区域码
          taskNumber: taskNumber, // 活动总数
          volunteerNumber: volunteerNumber, // 志愿者总数
          processedNumber: processedNumber,
          consultationsNumber: consultationsNumber,
          tskPerc: tskPerc,
          memPerc: memPerc,
          authMemPerc: authMemPerc,
          consPerc: consPerc,
          // coord: item.properties.center,
          coord: item.properties.centroid,
          selected: false
          // x: 150,
          // y: 150
        }
      })
      echarts.registerMap(mapName, geoJson)

      var option = {
        tooltip: {
          show: false

        },
        visualMap: {
          show: false,
          min: 0,
          max: 1000000,
          right: 100,
          seriesIndex: 1,
          type: 'piecewise',
          bottom: 100,
          textStyle: {
            color: '#fff'
          }
        },

        geo: {
          map: mapName,
          aspectScale: 0.75,
          zoom: 1.2,
          roam: false,
          itemStyle: {
            shadowColor: '#13BFFF',
            shadowBlur: 40
          }
        },
        series: [
          {
            type: 'map',
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 28,
                  color: '#fff'
                },
                formatter: '{b}: {c}',
                width: '287',
                height: '75',
                backgroundColor: {
                  image: ''
                }
              },

              emphasis: {
                textStyle: {
                  color: '#fff'
                },
                areaColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#2E97FF' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#0054E5' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#13BFFF',
                borderWidth: 4,
                areaColor: '#00196E'
              },
              emphasis: {
                areaColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#2E97FF' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#0054E5' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            zoom: 1.2,
            roam: false,
            map: mapName,
            data: data
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',

            formatter: function(params) {
              var res = ''
              var myseries = option.series
              for (var j = 0; j < myseries[0].data.length; j++) {
                if (myseries[0].data[j].name === params.name) {
                  res +=
                    ' ' +
                    '   {img1|优Ⅲ类}   ' +
                    '   {img2|Ⅳ类}   ' +
                    '   {img3|Ⅴ类}   ' +
                    '\n     5个  ' +
                    '        3个  ' +
                    '      2个 '
                }
              }
              return res
            },
            rippleEffect: {
              period: 15,
              scale: 4,
              brushType: 'fill'
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#f40',
                shadowBlur: 10,
                shadowColor: '#f40'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.on('click',function(params){
        _this.$emit('clickEchartsMap',params.data.areaCode)
      });
    },
    initArcgisMap(){
      var _this = this
      this.map = new Map({
        // basemap: "streets-vector"
      })
      this.mapView = new MapView({
        container: 'arcgis-city',
        map: this.map,
        center: [120.74821046646763, 31.428894257238568], // 初始显示的地图中心点，经纬度
        zoom: 2
      })
      // 移除放大縮小按鈕
      this.mapView.ui.remove("zoom");
      // 移除底部powered by ESRI
      this.mapView.ui.remove('attribution')
      //#region 加载切片服务
      let layer = new TileLayer({
        url:'http://180.108.205.100:8081/api/stt/common/gov/map'
      });
      this.map.add(layer)


      // let layer = new WebTileLayer({
      //   id: 'gaode',
      //   urlTemplate:'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={col}&y={row}&z={level}',
      //   name: '高德地图'
      // });
      // this.map.add(layer)


      // 给 “地图视图” 绑定点击事件
      this.mapView.on('click', e => {
        this.mapView.hitTest(e).then(res => {
          for(var x = 0;x<res.results.length;x++){
            if(res.results[x].graphic.attributes){
              _this.$emit('clickEchartsMap',res.results[x].graphic.attributes.areaCode)
            }
          }
        })
      })
      this.mapView.on('pointer-move', e => {
        //鼠标手形
        this.mapView.hitTest(e).then(res => {
          console.log(res)
          if(res.results.length>0){
            document.getElementById("arcgis-city").style.cursor="pointer"
          }else{
            document.getElementById("arcgis-city").style.cursor="default"
          }
        })
      })
    },

    initGrid(){
      const graphicsLayer = new GraphicsLayer();
      this.map.add(graphicsLayer,2);
      for(var a = 0;a<geoJson.features.length;a++){
        const point = {
          type: "point",
          longitude: geoJson.features[a].properties.centerLon,
          latitude:geoJson.features[a].properties.centerLat
        }
        const textSymbol = new TextSymbol({
          text: geoJson.features[a].properties.name,
          color: "white",
          font: {
            size: 30,
            family: "Josefin Slab",
            weight: "bold"
          }
        });
        const pointGraphic = new Graphic({
          geometry: point,
          symbol: textSymbol,
        });
        // var textSym = new TextSymbol("hello world");
        // var font = new Font();
        // font.setSize("14pt");
        // font.setWeight(Font.WEIGHT_BOLD);
        // textSym.setFont(font);
        // textSym.setColor(new Color([255, 0, 0, 0.8]));

        const polygon = {
          type: "polygon",
          rings: geoJson.features[a].geometry.coordinates,
        }
        const simpleFillSymbol = {
          type: "simple-fill",
          color: geoJson.features[a].properties.fill,  // Orange, opacity 80%
          outline: {
            color: [255, 255, 255],
            width: 1
          }
        };

        const polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: simpleFillSymbol,
          attributes: {
            areaCode: geoJson.features[a].properties.areaCode
          },
        });
        graphicsLayer.add(polygonGraphic);
        graphicsLayer.add(pointGraphic);
      }



    },
  }
}
</script>
<style lang="less" scoped>
.chart-city {
  width: 100%;
  height: calc(100% - 220px);
  margin-top: 100px;
}

.font-24 {
  color: #91B6FF;
  line-height: 30px;
  margin-top: 10px;
}

.font-32 {
  line-height: 112px;
}

.mid {
  flex: 1;
  height: calc(100vh - 164px);
  position: relative;
}

ul {
  display: flex;

  li {
    font-family: DS;
    font-size: 100px;
    width: 88px;
    height: 112px;
    background: #0A54EA;
    border: 1px solid #91B6FF;
    margin-right: 22px;
    text-align: center;
    line-height: 112px;
  }
}
  .map-switch{
    position: absolute;
    top: 0;
    right: 0;
  }
  .map-btn{
    font-size: 25px;
    width: 256px;
    height: 60px;
    border: 0;
    color: #2eadc7;
    background-color: transparent;
    background-image: url("../../../assets/images/party/map_switch.png");
    background-size: 100% 100%;
    margin-right: 50px;
    margin-top: 30px;
  }
  .map_time{

    font-size: 20px;
  }
</style>

